<template>
  <div class="aaa">
    <el-table
      :data="tableData"
      :row-class-name="tableRowClassName"
      height="600px"
    >
      <el-table-column prop="id" label="ID" width="60" sortable>
      </el-table-column>
      <el-table-column prop="userName" label="用户名" width="200">
      </el-table-column>
      <el-table-column prop="nickName" label="昵称" width="200">
      </el-table-column>
      <el-table-column prop="password" label="密码(密码已加密)">
      </el-table-column>
      <el-table-column fixed="right" width="100" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >重置密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="listData"
    >
    </el-pagination>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.aaa {
  width: 70%;
}
</style>

<script>
import { getUserData, initUserData } from "@/server/server";
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      //每隔1行变绿
      row;
      if (rowIndex === 1) {
        //return "warning-row";
        return "";
      } else if (rowIndex % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    handleEdit(index, row) {
      //修改密码按钮事件
      console.log(index);
      //console.log(row);
      this.open(row); //弹窗
    },
    open(row) {
      //弹窗修改密码
      this.$prompt("请输入新密码,6-18位哦", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[0-9A-Za-z]{6,18}$/,
        inputErrorMessage: "密码格式不正确",
      })
        .then(({ value }) => {
          initUserData(row.id, { password: value })
            .then((result) => {
              console.log(result);
              this.$message({
                type: "success",
                message: "你的新密码是: " + value,
              });
            })
            .catch((err) => {
              console.log(err);
              this.$message.error("修改失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
        });
    },
    async handleCurrentChange(index) {
      console.log(index);
      const res = await getUserData({ page: index });
      this.tableData = res.list;
      this.$listeners;
    },
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          userName: "加载中",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      listData: 10,
    };
  },
  async created() {
    const res = await getUserData();
    console.log(res);
    this.tableData = res.list;
    this.listData = res.totals;
    //console.log(getUserData);
    // console.log(initUserData);
  },
};
</script>
